<style lang="scss" scoped>
.title {
    background-color: #fff;
    width: 100%;
}

.top {
    width: 100%;
    height: 90px;
    background-color: #fff;
    border-radius: 10px;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: 250px;

    li {
        display: flex;
        // flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0 5px;
    }
    .active{
        background: pink;
        color: #fff;
    }
}

.name {
    height: 50px;
}
</style>

<template>
    <div style="margin:  10px;background-color: #f1f1f1;">
        <div class="title">
            <van-nav-bar left-arrow title="新建档案" @click-left="$router.go(-1)" />
            <van-notice-bar wrapable :scrollable="false" text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时使命认证！" />
            <van-button style="margin: 10px 3px;" type="primary">基本信息</van-button>
        </div>
        <main style="padding: 10px;">
            <div class="top">
                <p style="line-height: 30px;margin-left: 10px;font-size: 15px;">与您的关系</p>
            </div>
            <van-form ref="config.value">
                <nav>
                    <li v-for="(relation, index) in relationList"   :class="{ active: activity === index }" :key="index" :v-model="config.relation" @click="handleRelation(relation, index)" > <span>{{ relation }}</span> </li>
                </nav>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.name" required label="姓名" placeholder="请输入真实姓名" />
                </van-cell-group>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.standing" required label="身份证" placeholder="请输入身份证号" @input="setIdNumber(config.standing)" />
                </van-cell-group>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.birthday" required label="出生日期" placeholder="请输入出生日期" />
                </van-cell-group>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.age" required label="年龄" placeholder="请输入年龄" />
                </van-cell-group>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.sex" required label="性别" placeholder="请输入性别" />
                </van-cell-group>
                <van-cell-group style="width: 100%;margin-right: 10px;">
                    <van-field v-model="config.phone" required label="联系方式" placeholder="请输入手机号码" />
                </van-cell-group>
            </van-form>
            <van-button type="primary" style="width: 100%;" @click="onPonent">保存</van-button>
        </main>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,watch } from 'vue'
import { useRouter } from 'vue-router';
const activity=ref(0)
const router=useRouter()
const config = ref({
    name: '',
    standing: '',
    birthday: '',
    sex: '',
    phone: '',
    relation: "",
    age:0
})
// 关系
const relationList = ref(['配偶', '父母', '亲戚', '朋友', '其他', '子女'])



function setIdNumber(standing: string) {
    if (standing.length === 18) {
        // 获取第7位到10为的数组作为出生日期
        config.value.birthday = standing.substr(6, 4) + '-' + standing.substr(10, 2) + '-' + standing.substr(12, 2)
        // state.gender = `${idNumber.substr(16,1) % 2 === 0 ? '男' : '女'}`   
        const start = config.value.standing.slice(0, 6)
        const end = config.value.standing.slice(-4)
        config.value.standing = `${start}**********${end}`
    }
}

function extractGenderFromId(id: string) {
    // 假设身份证的第17位为奇数表示男性，偶数表示女性
    return parseInt(id.charAt(16), 10) % 2 === 0 ? '女' : '男';
}


function calculateAge(birthYear: number, birthMonth: number, birthDay: number) {
    const today = new Date();
    const birthDate = new Date(birthYear, birthMonth - 1, birthDay);
    let age = today.getFullYear() - birthDate.getFullYear();

    if (today.getMonth() < birthMonth || (today.getMonth() === birthMonth && today.getDate() < birthDay)) {
        age--;
    }
    return age;
}


watch(
    () => config.value.standing,
    (newId) => {
        if (newId.length !== 18) return;
        const birthYear = parseInt(newId.substr(6, 4), 10);
        const birthMonth = parseInt(newId.substr(10, 2), 10);
        const birthDay = parseInt(newId.substr(12, 2), 10);
        config.value.sex = extractGenderFromId(newId);
        config.value.age = calculateAge(birthYear, birthMonth, birthDay);
    },
);


const onPonent = () => {
    // console.log(config.value);
    if (!config.value.name) {
        alert('姓名不能为空');
    } else if (!config.value.standing) {
        alert('身份证不能为空');
    } else if (!config.value.birthday) {
        alert('出生日期不能为空');
    } else if (!config.value.phone) {
        alert('电话号码不能为空');
    } else if (!config.value.sex) {
        alert('性别不能为空');
    } else {
        axios.put('/api/user/list', config.value)
        console.log(config.value);
        alert('保存就诊人成功');
        config.value.birthday = ''
        config.value.name = ''
        config.value.standing = ''
        config.value.phone = ''
        config.value.sex = ''
        config.value.age = 0
        config.value.relation = ''
        router.push('/more')
    }

}

const handleRelation=(relation:string,index:number)=>{
    config.value.relation=relation
    // console.log(config.value.relation);
    activity.value =index 
    // console.log(v);
}


</script>